import React, { useState, useRef } from 'react';
import RCodeMirror from '../RCodeMirror';
import RCodeNav from '../RCodeNav';
import { CodeMirrorProps } from '../RCodeMirror';
import { RCodeNavProps } from '../RCodeNav';

import './index.less';

import 'codemirror/lib/codemirror.css';
// 引入基本样式
import 'codemirror/mode/sql/sql';
// 引入语言类型(可选)

import 'codemirror/theme/eclipse.css';
// 引入主题颜色(可选)

interface CodeEditorProps {
  codeNavConfig?: RCodeNavProps;
  codeEditorConfig?: CodeMirrorProps;
  options?: any;
  onLoad?: (editor: any) => void;
}

const CodeEditor: React.FC<CodeEditorProps> = function({
  options,
  codeNavConfig,
  codeEditorConfig,
  onLoad,
}) {
  const editorWrepRef = useRef(null);
  const [editor, setEditor] = useState<any>();
  const load = (editor: any) => {
    onLoad && onLoad(editor);
    setEditor(editor);
  };
  options.viewportMargin = Infinity;
  return (
    <div className="ra-code-editor">
      <div className="ra-editor-wrap" ref={editorWrepRef}>
        <RCodeMirror
          options={options}
          onLoad={load}
          value={options.value}
          {...(codeEditorConfig || {})}
        />
      </div>
      <div className="ra-code-nav">
        <RCodeNav bindNode={editorWrepRef.current} editor={editor} {...(codeNavConfig || {})} />
      </div>
    </div>
  );
};

export default CodeEditor;
